<template>
  <div class="box">
    <el-container>
      <el-header class="item">
        <div class="left" v-for="(item,index) in pageList" :key="index" :index="`/${item.url}`">
            <img class="tu" src="../images/logo.1296c0b5.jpg" alt="" srcset="">
            <router-link :to="`/${item.url}`">
              {{item.name}}
            </router-link>
            <span class="biaot">pp周末</span>
        </div>
        <div class="right">
          <span>
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="iconfont icon-shezhixitongshezhigongnengshezhishuxing"></i>设置
              </span>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item v-for="(item,index) in routingList" :key="index" :index="`/${item.url}`">
                  <router-link :to="`/${item.url}`">
                  <i id="iconfont" class="iconfont">{{item.icn}}</i>
                    {{item.name}}
                  </router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
          <span class="iconfont icon-guanbi" @click="tuei">退出登陆</span>
        </div>
      </el-header>
      <el-container>
      <!-- 导航栏 -->
        <el-aside width="95px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo">
                <el-menu-item  v-for="(item,index) in navList" :key="index" :index="`/${item.url}`">
                  <span slot="title" >
                    <router-link :to="`/${item.url}`" class="app">
                      <i class="iconfont">{{item.icn}}</i>
                      {{item.name}}
                    </router-link>
                  </span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    data(){
      return{
        pageList:[{
          name:"首页",
          url:'Page'
        }],
        navList:[{
          name:'居民',
          url:'people',
          icn:'\ue6db'
        },{
          name:'报修',
          url:'baoxiu',
          icn:'\ue600'
        },{
          name:'投诉',
          url:'Center',
          icn:'\uebbc'
        },{
          name:'职员',
          url:'Item',
          icn:'\ue614'
        },{
          name:'公告',
          url:'About',
          icn:'\ue646'
        },{
          name:'门店',
          url:'shop',
          icn:'\ue624'
        },{
          name:'图片',
          url:'tupian',
          icn:'\ue7ff'
        }],
        routingList:[{
          name:'楼栋管理',
          url:'Buildings',
          icn:'\ue60f'
        },{
          name:'房间管理',
          url:'room',
          icn:'\ue613'
        },{
          name:'管理员管理',
          url:'Administrator',
          icn:'\ue601'
        },{
          name:'角色管理',
          url:'rooms',
          icn:'\ue6b2'
        }],
        
      }
      
    },
    methods:{
      tuei(){
        sessionStorage.clear()
        this.$router.push('/Login')
      }
    }
}
</script>

<style scoped>
  .el-icon-arrow-down {
    font-size: 12px;
  }
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: rgb(29, 28, 28);
    line-height: 60px;
  }
  
  .el-aside {

    background-color: #f4f4f4;
     background-color: #f4f4f4;
    color: #333;
    line-height: 200px;
  }
  .el-main {
    height: 900px;
    background-color: #ccc;
    background-color: #fff;
    color: #333;
    /* margin-top:90px; */

  }
  .tu{
  width: 130px;
  height: 30px;
  margin-top: 20px;
}
.item{
  height: 50px;
}
.left{
  float: left;
}
.el-header{
  background-color: #f4f4f4;
  display: flex;
  justify-content: space-between;
}
.biaot{
  font-size: 14px;
  margin: 20px;
}
.tac{
  background-color: #f4f4f4;
}
.el-menu-item{
  height: 80px;
}
.app{
  text-decoration: none;
  color: #000;
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.iconfont{
  /* margin-left: 10px; */
  /* padding: 10px; */
  width: 35px;
  font-size: 30px;
  height: 30px;
}
.el-menu-item{
  line-height: 10px;
}
span{
  margin: 0 30px;
}
.icon-shezhixitongshezhigongnengshezhishuxing{
  font-size: 15px;
}
.icon-guanbi{
  font-size: 10px;
}
a{
  text-decoration: none;
  color: #000;
}
#iconfont{
  font-size: 19px;
}
</style>
<style>
*{
  margin: 0;
  padding: 0;
}
</style>